import { 
  Tabs,
  TabList,
  Tab,
  TabPanel,
  TabPanels,
  Box
} from '@chakra-ui/react'
import SignUp from './SignUp'
import SignIn from './SignIn'
import SignInFooter from './SignInFooter'
import SignUpFooter from './SignUpFooter'

export default function Form() {
  return (
    <Box className="sign">
      <Tabs isFitted>
        <TabList mb="50px" fontWeight="400" p="10px" color="#969696" border="none">
          <Tab _focus={{boxShadow: "none", fontWeight: "700",color: "#ea6f5a",borderBottom: "2px solid #ea6f5a"}}>登录</Tab>
          <b>·</b>
          <Tab _focus={{boxShadow: "none", fontWeight: "700",color: "#ea6f5a",borderBottom: "2px solid #ea6f5a"}}>注册</Tab>
        </TabList>
        <TabPanels>
          <TabPanel p="0">
            <SignIn />
            <SignInFooter />
          </TabPanel>
          <TabPanel p="0">
            <SignUp />
            <SignUpFooter />
          </TabPanel>
        </TabPanels>
      </Tabs>
    </Box>
  )
}